<template>
  <div class="showcase-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- <el-tab-pane label="推荐" name="first">用户管理</el-tab-pane> -->
      <el-tab-pane label="热点" name="second"
        ><hot-spot></hot-spot
      ></el-tab-pane>
      <!-- <el-tab-pane label="关注" name="third">角色管理</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import {
  postRelevanceSearchData,
  postDownloadSearchData,
  postTimeSearchData,
  postSearchRecommend,
} from "@/api/search/search";
import HotSpot from "@/components/Home/HotSpot/HotSpot.vue";
export default {
  components: { HotSpot },
  props: {},
  data() {
    return {
      activeName: "second",
    };
  },
  methods: {
    goToDetail(fileId) {
      this.$router.push({
        path: "/docdetail",
        query: {
          id: fileId,
        },
      });
    },
    //选项卡切换时发相应请求
    handleClick(tab) {
      if (tab.name == "first") this.getRelevanceSearchData();
      else if (tab.name == "second") this.getDownloadSearchData();
      else this.getTimeSearchData();
    },
    //获取推荐
    getSearchRecommendData() {
      let data = {
        from: 0,
        size: 12,
      };
      let body = JSON.stringify(data);
      postSearchRecommend(body).then((res) => {
        this.searchRecommendData = res.result.myFiles;
      });
    },
    //三种请求
    getRelevanceSearchData(page) {
      let data = {
        query: this.searchKeyWord,
        from: (page - 1) * 12,
        size: 12,
      };
      let body = JSON.stringify(data);
      postRelevanceSearchData(body).then((res) => {
        this.relevanceSearchData = res.result.myFiles;
        this.total = res.result.total;
      });
    },
    getDownloadSearchData(page) {
      let data = {
        query: this.searchKeyWord,
        from: (page - 1) * 12,
        size: 12,
      };
      let body = JSON.stringify(data);
      postDownloadSearchData(body).then((res) => {
        this.downloadSearchData = res.result.myFiles;
        this.total = res.result.total;
      });
    },
    getTimeSearchData(page) {
      let data = {
        query: this.searchKeyWord,
        from: (page - 1) * 12,
        size: 12,
      };
      let body = JSON.stringify(data);
      postTimeSearchData(body).then((res) => {
        this.timeSearchData = res.result.myFiles;
        this.total = res.result.total;
      });
    },
    //获取当前页数内容
    getPageItems() {
      this.$emit("get-document-recommend", this.page);
    },
    currentChange(val) {
      this.page = val;
      this.getPageItems();
    },
    getImage(index) {
      let img = "data:image/png;base64," + this.previewImages[index];
      return img;
    },
  },
  created() {
    this.getPageItems();
  },
};
</script>

<style scoped>
.showcase-container {
  margin-top: 48px;
  padding: 32px 40px;
  min-height: 560px;
  width: 1320px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
:deep(.el-tabs__nav-wrap.is-top::after) {
  display: none;
}
:deep(.el-tabs__item.is-top) {
  font-size: 22px;
  color: black;
}
:deep(.el-tabs__nav.is-top) {
  margin-left: 32px;
}
:deep(.el-tabs__item.is-top.is-active) {
  font-weight: bold;
  color: #005a95;
  border: none;
}
:deep(.el-tabs__active-bar.is-top) {
  background-color: #005a95;
  height: 3px;
  bottom: 1px;
}
:deep(.el-tabs__item:focus.is-active.is-focus:not(:active)) {
  box-shadow: 0 0;
  border-radius: 0;
}
</style>
